<template>
  <div>
    <div class="select_top">
      <el-input @keyup.native.enter="searchXM" clearable placeholder="请输入项目名称搜索" style="width:29%;margin-right:10px"
        v-model="searchName"
      >
      </el-input>
      <el-select v-model="pstatusvalue" clearable placeholder="项目状态">
        <el-option
          v-for="item in statusoptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button @click="searchXM">搜索</el-button>
      <el-button type="primary" style="float:right" @click="newXM">新增</el-button>
    </div>
    <el-table
      ref="filterTable"
      :data="xmList"
      style="width: 92%;font-size:13px;margin: 20px auto"
    >
      <el-table-column
        type="index"
        width="50"
        label="序号"
      >
      </el-table-column>
      <el-table-column
        prop="hash.pname"
        label="项目名称"
      >
      </el-table-column>
      <el-table-column
        prop="hash.zbname"
        label="所属指标"
      >
      </el-table-column>
      <el-table-column
        prop="hash.lbname"
        label="所属类别"
      >
      </el-table-column>
      <el-table-column
        prop="hash.intime"
        label="申报日期"
      >
      </el-table-column>
      <el-table-column
        prop="hash.statusname"
        label="状态"
      >
        <template slot-scope="scope1">
          <span v-if="scope1.row.hash.pstatus=== '0'">审核中</span>
          <span v-else-if="scope1.row.hash.pstatus=== '1'">审核通过</span>
          <span v-else style="color: red">被驳回</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="150"
      >
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            v-if="scope.row.hash.pstatus=='2'"
            @click="changeXM(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            type="primary"
            size="small"
            @click="checkXM(scope.row)"
            v-else
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :currentPage.sync="currentPage3"
      :pageSize="pagesize"
      layout="prev, pager, next, jumper"
      :total="total"
      style="text-align:center"
    >
    </el-pagination>
    <el-dialog
      title="新增项目申报"
      :visible.sync="showT"
      width="70%"
    >
      <el-form labelWidth="140px">
        <el-form-item label="所属指标">
          <el-select v-model="propertyid" placeholder="请选择" style="width:49%" @change="getSX2(propertyid)"
            v-validate="'required'" name="所属指标"
          >
            <el-option
              v-for="item in sxSelect"
              :key="item.hash.pname"
              :label="item.hash.pname"
              :value="item.hash.id"
            >
            </el-option>
          </el-select>
          <div class="el-form-item__error">{{ errors.first('所属指标') }}</div>
          <el-select v-model="nid" placeholder="请选择" style="width:49%" @change="getSX3(nid)"
            v-validate="'required'" name="所属指标"
          >
            <el-option
              v-for="item in sx2Select"
              :key="item.hash.nname"
              :label="item.hash.nname"
              :value="item.hash.id"
            >
            </el-option>
          </el-select>
          <div class="el-form-item__error">{{ errors.first('所属指标') }}</div>
        </el-form-item>
        <el-form-item label="所属类别">
          <el-select v-model="pclassify" placeholder="请选择" style="width:100%" v-validate="'required'"
            name="所属类别"
          >
            <el-option
              v-for="item in lbSelect"
              :key="item.hash.id"
              :label="item.hash.typename"
              :value="item.hash.id"
            >
            </el-option>
          </el-select>
          <div class="el-form-item__error">{{ errors.first('所属类别') }}</div>
        </el-form-item>
        <el-form-item label="项目名称">
          <el-input v-model="pname" placeholder="请输入内容" v-validate="'required'" name="项目名称"></el-input>
          <div class="el-form-item__error">{{ errors.first('项目名称') }}</div>
        </el-form-item>
        <el-form-item label="项目概况">
          <el-input
            v-validate="'required'" name="项目概况"
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="ptext"
          >
          </el-input>
          <div class="el-form-item__error">{{ errors.first('项目概况') }}</div>
        </el-form-item>
        <el-form-item label="牵头部门">
          <el-select v-model="assessunit" placeholder="请选择" style="width:100%" v-validate="'required'"
            name="牵头部门"
          >
            <el-option
              v-for="item in qtSelect"
              :key="item.hash.orgid"
              :label="item.hash.orgname"
              :value="item.hash.orgid"
            >
            </el-option>
          </el-select>
          <div class="el-form-item__error">{{ errors.first('牵头部门') }}</div>
        </el-form-item>
        <el-form-item label="责任单位">
          <el-select v-model="orgid" placeholder="请选择" style="width:100%" v-validate="'required'"
            name="责任单位"
          >
            <el-option
              v-for="item in zrSelect"
              :key="item.hash.orgid"
              :label="item.hash.orgname"
              :value="item.hash.orgid"
            >
            </el-option>
          </el-select>
          <div class="el-form-item__error">{{ errors.first('责任单位') }}</div>
        </el-form-item>
        <el-form-item label="计划时间">
          <el-date-picker
            style="width:100%"
            v-model="planDate"
            type="daterange"
            rangeSeparator="至"
            startPlaceholder="开始日期"
            endPlaceholder="结束日期"
            valueFormat="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="资金来源">
          <el-radio-group v-model="source">
            <el-radio label="市级财政">市级财政</el-radio>
            <el-radio label="区级财政">区级财政</el-radio>
            <el-radio label="自筹(其它)">自筹(其它)</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="金额(万元)">
          <el-input v-model="amount" placeholder="上限999" type="number" v-validate="'required'"
            name="金额"
          ></el-input>
          <div class="el-form-item__error">{{ errors.first('金额') }}</div>
        </el-form-item>

        <el-form-item label="联系人">
          <el-input v-model="linkman" placeholder="请输入" v-validate="'required'" name="联系人"></el-input>
          <div class="el-form-item__error">{{ errors.first('联系人') }}</div>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="tel" placeholder="请输入" v-validate="'required'" name="联系方式"></el-input>
          <div class="el-form-item__error">{{ errors.first('联系方式') }}</div>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="localPointname" placeholder="请输入" style="width:89%;margin-right:1.5%" v-validate="'required'"
            name="地址"
          ></el-input><el-button @click="innerVisible1=true">选择</el-button>
          <div class="el-form-item__error">{{ errors.first('地址') }}</div>
        </el-form-item>
        <el-form-item label="坐标(经纬度)">
          <el-input v-model="point" placeholder="地图" readonly></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showT = false">取 消</el-button>
        <el-button type="primary" @click="savenewXM">确 定</el-button>
      </span>
      <el-dialog
        width="60%"
        title="选择地址"
        top="0"
        :visible.sync="innerVisible1"
        appendToBody
      >
        <qqmap :chooseLocal="chooseLocal" :isshowMap="this.isshowMap" @getLocal="this.getLocal" v-if="isRouterAlive"></qqmap>
      </el-dialog>
    </el-dialog>


    <el-dialog
      title="编辑项目"
      :visible.sync="showT3"
      width="70%"
    >
      <editXm :xmid="xmid" ref="child" @changeshowt3="changeshowt3"></editXm>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showT3 = false">取 消</el-button>
        <el-button type="primary" @click="savechangeXM">修 改</el-button>
      </span>
      <el-dialog
        width="60%"
        title="选择地址"
        top="0"
        :visible.sync="innerVisible1"
        appendToBody
        closeOnClickModal="false"
      >
        <qqmap :chooseLocal="chooseLocal" :isshowMap="this.isshowMap" @getLocal="this.getLocal" v-if="isRouterAlive"></qqmap>
      </el-dialog>
    </el-dialog>


    <el-dialog
      title="查看项目"
      :visible.sync="showT2"
      width="50%"
    >
      <el-form labelWidth="140px" v-loading="loading">
        <el-form-item label="项目状态：" style="color:#f60">
          {{xmData.xmStatus}}
        </el-form-item>
        <el-form-item label="所属指标：">
          <el-select v-model="xmData.propertyid" style="width:49%" disabled>
            <el-option
              v-for="item in sxSelect"
              :key="item.hash.pname"
              :label="item.hash.pname"
              :value="item.hash.id"
            >
            </el-option>
          </el-select>
          <el-select v-model="xmData.nid" placeholder="请选择" style="width:49%" disabled>
            <el-option
              v-for="item in sx2Select"
              :key="item.hash.nname"
              :label="item.hash.nname"
              :value="item.hash.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属类别：">
          <el-select v-model="xmData.pclassify" placeholder="请选择" style="width:100%" disabled>
            <el-option
              v-for="item in lbSelect"
              :key="item.hash.id"
              :label="item.hash.typename"
              :value="item.hash.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目名称：">
          {{xmData.pname}}
        </el-form-item>
        <el-form-item label="项目概况：">
          {{xmData.ptext}}
        </el-form-item>
        <el-form-item label="牵头部门：">
          <el-select v-model="xmData.assessunit" placeholder="请选择" style="width:100%" disabled>
            <el-option
              v-for="item in qtSelect"
              :key="item.hash.orgid"
              :label="item.hash.orgname"
              :value="item.hash.orgid"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="责任单位：">
          <el-select v-model="xmData.orgid" placeholder="请选择" style="width:100%" disabled>
            <el-option
              v-for="item in zrSelect"
              :key="item.hash.orgid"
              :label="item.hash.orgname"
              :value="item.hash.orgid"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计划时间：">
          {{xmData.begindate}} 至 {{xmData.enddate}}
        </el-form-item>
        <el-form-item label="资金来源：">
          {{xmData.source}}
        </el-form-item>
        <el-form-item label="金额(万元)：">
          {{xmData.amount}}
        </el-form-item>

        <el-form-item label="联系人：">
          {{xmData.linkman}}
        </el-form-item>
        <el-form-item label="联系方式：">
          {{xmData.tel}}
        </el-form-item>
        <el-form-item label="地址：">
          {{xmData.address}}
        </el-form-item>
        <el-form-item label="坐标(经纬度)：">
          {{xmData.lat}},{{xmData.lon}}
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import qqmap from '~/components/common/qqmap.vue';
import editXm from '~/components/common/editXm.vue';

export default {
  data() {
    return {
      currentPage3: 1,
      pagesize: 10,
      total: 10,
      showMap: false,
      innerVisible1: false,
      loading: true,
      loading2: true,
      ts: this.newStore(),
      xmData: {},
      xmid: '',
      showT: false,
      showT2: false,
      showT3: false,
      chooseLocal: {
        lat: '39.06552',
        lng: '117.11415',
      },

      localPoint: {},
      localPointname: '',
      isRouterAlive: true,
      sxSelect: [],
      sx2Select: [],
      lbSelect: [],
      qtSelect: [],
      zrSelect: [],
      id: '',
      propertyid: '',
      nid: '',
      pclassify: '',
      pname: '',
      ptext: '',
      assessunit: '',
      orgid: '',
      planDate: [],
      source: '',
      amount: '',
      linkman: '',
      tel: '',
      zbType: '',
      xmList: [],
      pstatusvalue: '',
      searchName: '',
      statusoptions: [{
        value: '0',
        label: '审核中',
      }, {
        value: '1',
        label: '审核通过',
      }, {
        value: '2',
        label: '被驳回',
      }],
    };
  },
  components: {
    qqmap,
    editXm,
  },
  created() {
    this.getxmList();
  },
  computed: {
    point() {
      const a = this.chooseLocal.lat;
      const b = this.chooseLocal.lng;
      return `${a},${b}`;
    },
  },
  methods: {
    changshowt3() {
      this.showT3 = false;
      this.getxmList();
    },
    handleCurrentChange(val) {
      this.getxmList();
    },
    savechangeXM() {
      this.$refs.child.savechangeXM();
    },
    changeXM(item) {
      this.showT3 = true;
      this.xmid = item.hash.id;
    },
    checkXM(item) {
      this.showT2 = true;
      this.loading = true;
      this.getSelect();
      const req = {
        handle: '2E8E7DE13E3E62949CFDA5DB7E2B7680B80A9177C0749743021A445010569AEF',
        id: item.hash.id,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.xmData = ts.d.data.operation1[0].hash;
        this.getSX2(this.xmData.propertyid);
        this.getSX3(this.xmData.nid);
        if (item.hash.pstatus == '0') {
          this.xmData.xmStatus = '审核中';
        } else if (item.hash.pstatus == '1') {
          this.xmData.xmStatus = '审核通过';
        } else {
          this.xmData.xmStatus = '被驳回';
        }

        setTimeout(() => {
          this.loading = false;
        }, 500);
      });
    },
    newXM() {
      this.showT = true;
      this.getSelect();
      this.getSX2();
    },
    savenewXM() {
      this.$validator.validateAll().then((result) => {
        if (result) {
          const req = {
            handle: '2E8E7DE13E3E62949CFDA5DB7E2B7680B4DAEBDD8A8CB49A2D51C9A12806E8B1',
            pname: this.pname,
            lon: this.chooseLocal.lng,
            lat: this.chooseLocal.lat,
            nid: this.nid,
            tel: this.tel,
            pclassify: this.pclassify,
            propertyid: this.propertyid,
            amount: this.amount,
            source: this.source,
            orgid: this.orgid,
            assessunit: this.assessunit,
            address: this.localPoint.name,
            ptext: this.ptext,
            linkman: this.linkman,
            begindate: this.planDate[0],
            enddate: this.planDate[1],
          };
          this.$confirm('确定提交?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            this.spost(this.ts, '/mainservlet', req).then(() => {
              this.$message({
                type: 'success',
                message: '提交成功!',
              });
              this.getxmList();
              this.showT = false;
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            });
          });
        } else {
          this.$message.error('内容不能为空！');
          return false;
        }
      });
    },
    getxmList() {
      const req = {
        handle: '2E8E7DE13E3E62949CFDA5DB7E2B7680E0EC18D1DF4B045CF6486B1D96ED9F7E',
        pname: '',
        pstatus: '',
        start: (this.currentPage3 - 1) * this.pagesize,
        limit: this.pagesize,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.xmList = ts.d.data.operation1;
        this.total = parseInt(ts.d.data.operation2[0].hash.allrs);
      });
    },
    searchXM() {
      const req = {
        handle: '2E8E7DE13E3E62949CFDA5DB7E2B7680E0EC18D1DF4B045CF6486B1D96ED9F7E',
        pname: this.searchName,
        pstatus: this.pstatusvalue,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.xmList = ts.d.data.operation1;
      });
    },
    getSelect() {
      const req1 = {
        handle: '04A3682CDCA57EBA0DA6C15FB2ECC84BE133DA25EC7F9F14C878125FE067FE5A',
        start: '0',
        limit: '10',
      };
      const req4 = {
        handle: 'B37BA078041E48C78AD636982D7A6AC8CD3A43E9777C4E90',
        suporgid: '1',
      };
      const req5 = {
        handle: 'B37BA078041E48C78AD636982D7A6AC8CD3A43E9777C4E90',
        suporgid: '2',
      };
      this.spost(this.ts, '/mainservlet', req1).then((ts) => {
        this.sxSelect = ts.d.data.operation1;
      });
      this.spost(this.ts, '/mainservlet', req4).then((ts) => {
        this.qtSelect = ts.d.data.operation1;
      });
      this.spost(this.ts, '/mainservlet', req5).then((ts) => {
        this.zrSelect = ts.d.data.operation1;
      });
    },
    getSX2(propertyid) {
      this.nid = '';
      this.sx2Select = [];
      const req = {
        handle: '2E8E7DE13E3E62949CFDA5DB7E2B768010F5656E049E8683BFF0B9210751F692',
        propertyid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.sx2Select = ts.d.data.operation1;
        this.nid = this.sx2Select[0].hash.id;
        this.getSX3(this.nid);
      });
    },
    getSX3(nid) {
      this.pclassify = '';
      this.lbSelect = [];
      const req = {
        handle: '2E8E7DE13E3E62949CFDA5DB7E2B7680D1FA20266255B394E8471967064FB9C2BFF0B9210751F692',
        nid,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.lbSelect = ts.d.data.operation1;
        this.pclassify = this.lbSelect[0].hash.id;
      });
    },
    getLocal(data) {
      this.localPoint = data;
      this.localPointname = `${data.name}（${data.address}）`;
      this.chooseLocal = data.latLng;
    },
    isshowMap() {
      this.reload();
      this.innerVisible1 = !this.innerVisible1;
    },
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
      });
    },
  },
};
</script>

<style lang="stylus">
.red
  color red
.el-input--suffix .el-input__inner
  font-size 13px
.el-button
  font-size 13px
.el-table th>.cell
  text-align center
.el-table .cell
  text-align center
.el-select
  width 14%
  margin-right 1%
.select_top
  width 92%
  margin 20px auto
.el-col
  padding: 20px 10px;
</style>
